import React, { PureComponent } from 'react';
// import E from 'wangeditor'
import ReactQuill from 'react-quill'; // ES6
import 'react-quill/dist/quill.snow.css'; 
class App extends PureComponent {
  constructor(props, context) {
      super(props, context);
      this.reactQuillRef=null;
      let toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        [{ 'list': 'ordered'}, { 'list': 'bullet' }],
        [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        [{ 'align': [] }],
        ['image'],
      ];
      this.modules  ={
        toolbar: toolbarOptions,
        // handlers: {
        //   'image':this.showUploadBox.bind(this)
        //  }
      }
      this.state = { text: '' } // You can also pass a Quill Delta here
  }
  handleChange=(content, delta, source, editor)=> {
   
    this.setState({text:editor.getText()});
    // console.log(editor.getText())
  }
  showUploadBox=()=>{


  }
  componentDidMount() {
    
    this.props.OnRef({ref:this,type:'editor'});
    this.props.record && this.reactQuillRef.editor.setText(this.props.record.lxnr)
  }
  render() {
    return (
      <ReactQuill  ref={(el) => { this.reactQuillRef = el }}
      onChange={this.handleChange} modules={this.modules}/>
    );
  }


}

export default App;